import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import PropTypes from 'prop-types';
import { Input, Grid, Button, Switch, Transfer, Feedback } from '@icedesign/base';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';

const { Row, Col } = Grid;
export default class AddUserForm extends Component {
  static displayName = 'AddUserForm';

  static propTypes = {
    onSubmit : PropTypes.func.isRequired,
  };

  static defaultProps = {};

  dataSource = [{
    label : '谷歌广告联盟',
    value : 'google',
  },{
    label : '百度网盟',
    value : 'baidu',
  },{
    label : '360网盟',
    value : '360',
  },{
    label : '搜狗网盟',
    value : 'sougou',
  },{
    label : '百度阿拉丁',
    value : 'baiduald',
  }]

  constructor(props) {
    super(props);
    this.state = {
      value: {
        username: '',
        nickname : '',
        password : '',
        enable: true,
        channel : ['google','sougou'],
      },
    };
  }

  checkPasswd = (rule, values, callback) => {
    if (!values) {
      callback('请输入初始密码');
    } else if (values.length < 8) {
      callback('密码必须大于8位');
    } else if (values.length > 16) {
      callback('密码必须小于16位');
    } else {
      callback();
    }
  };

  checkPasswd2 = (rule, values, callback, stateValues) => {
    if(!values){
      callback('请输入确认密码');
    }else if (values && values !== stateValues.password) {
      callback('两次输入密码不一致');
    } else {
      callback();
    }
  };

  formChange = (value) => {
    this.setState({ value });
  };

  validateAllFormField = (e) => {
    e.preventDefault();
    this.refs.form.validateAll(async(errors, values) => {
      if (errors) { return; }
      let flag = await this.props.onSubmit({
        ...values,
        disable : !values.enable
      })
      if(flag){
        Feedback.toast.success('提交成功');
      }else{
        Feedback.error.success('提交失败');
      }
    });
  };

  render() {
    return (
      <div className="user-form">
        <IceContainer>
          <IceFormBinderWrapper
            value={this.state.value}
            onChange={this.formChange}
            ref="form"
          >
            <div style={styles.formContent}>
              <h2 style={styles.formTitle}>添加广告业务员</h2>

              <Row style={styles.formItem}>
                <Col xxs="6" s="3" l="3" style={styles.formLabel}>用户名:</Col>
                <Col s="12" l="10">
                  <IceFormBinder name="username" required max={10} message="用户名必填">
                    <Input size="large" placeholder="请输入用户名" style={{ width: '100%' }} />
                  </IceFormBinder>
                  <IceFormError name="username" />
                </Col>
              </Row>

              <Row style={styles.formItem}>
                <Col xxs="6" s="3" l="3" style={styles.formLabel}>昵称:</Col>
                <Col s="12" l="10">
                  <IceFormBinder name="nickname" required max={50} message="昵称必填">
                    <Input size="large" placeholder="请输入昵称" style={{ width: '100%' }} />
                  </IceFormBinder>
                  <IceFormError name="nickname" />
                </Col>
              </Row>
              
              <Row style={styles.formItem}>
                <Col xxs="6" s="3" l="3" style={styles.formLabel}>密码:</Col>
                <Col s="12" l="10">
                  <IceFormBinder name="password" required validator={this.checkPasswd}>
                    <Input style={{ width: '100%' }} htmlType="password" size="large" placeholder="请输入初始密码"/>
                  </IceFormBinder>
                  <IceFormError name="password" />
                </Col>
              </Row>

              <Row style={styles.formItem}>
                <Col xxs="6" s="3" l="3" style={styles.formLabel}>确认密码:</Col>
                <Col s="12" l="10">
                  <IceFormBinder name="rePasswd" required validator={(rule, values, callback) =>
                      this.checkPasswd2(rule,values,callback,this.state.value)
                    }>
                    <Input style={{ width: '100%' }} htmlType="password" size="large" placeholder="两次输入密码保持一致"/>
                  </IceFormBinder>
                  <IceFormError name="rePasswd" />
                </Col>
              </Row>

              <Row style={styles.formItem}>
                <Col xxs="6" s="3" l="3" style={styles.formLabel}>邮箱:</Col>
                <Col s="12" l="10">
                  <IceFormBinder type="email" name="email">
                    <Input style={{ width: '100%' }} size="large" placeholder="admin@newegg.com"/>
                  </IceFormBinder>
                  <IceFormError name="email" />
                </Col>
              </Row>

              <Row style={styles.formItem}>
                <Col xxs="6" s="3" l="3" style={styles.formLabel}>电话:</Col>
                <Col s="12" l="10">
                  <IceFormBinder name="phone">
                    <Input style={{ width: '100%' }} size="large" placeholder="请输入联系方式"/>
                  </IceFormBinder>
                  <IceFormError name="phone" />
                </Col>
              </Row>

              <Row style={styles.formItem}>
                <Col xxs="6" s="3" l="3" style={styles.formLabel}>请选择广告渠道:</Col>
                <Col s="12" l="10">
                  <IceFormBinder name="channel">
                    <Transfer dataSource={this.dataSource}/>
                  </IceFormBinder>
                  <IceFormError name="channel" />
                </Col>
              </Row>

              <Row style={styles.formItem}>
                <Col xxs="6" s="3" l="3" style={styles.formLabel}>是否启用:</Col>
                <Col s="12" l="10">
                  <IceFormBinder name="enable">
                    <Switch defaultChecked={true}/>
                  </IceFormBinder>
                  <IceFormError name="enable" />
                </Col>
              </Row>

            </div>
          </IceFormBinderWrapper>

          <Row style={{ marginTop: 20 }}>
            <Col offset="3">
              <Button type="primary" onClick={this.validateAllFormField}> 提 交 </Button>
            </Col>
          </Row>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  formContent: {
    width: '100%',
    position: 'relative',
  },
  formItem: {
    marginBottom: 25,
  },
  formLabel: {
    height: '32px',
    lineHeight: '32px',
    textAlign: 'right',
    paddingRight : '5px',
  },
  formTitle: {
    margin: '0 0 20px',
    paddingBottom: '10px',
    borderBottom: '1px solid #eee',
  },
};
